<template>
  <div class="order-info">
    <div class="orderNo">
      订单号:
      <span style="font-weight: bold">{{ orderDetails.orderNo }}</span>
    </div>
    <div class="order-info-main">
      <el-row class="detail-info">
        <el-col :span="8">
          <p class="item">
            <span class="props">学员姓名: </span>{{ orderDetails.studentName }}
          </p>
          <p class="item">
            <span class="props">性别: </span
            >{{
              orderDetails.gender === "0"
                ? "男"
                : orderDetails.gender === "1"
                ? "女"
                : "未知"
            }}
          </p>
          <p class="item">
            <span class="props">手机号: </span>{{ orderDetails.mobile }}
          </p>

          <p class="item">
            <span class="props">创建时间: </span>{{ orderDetails.addTime }}
          </p>
        </el-col>
        <el-col :span="8">
          <p class="item">
            <span class="props">订单类型: </span>{{ orderDetails.type }}
          </p>
          <p class="item">
            <span class="props">应收金额(元): </span>{{ orderDetails.amount }}
          </p>
          <p class="item">
            <span class="props">实收金额(元): </span
            >{{ orderDetails.paidAmount }}
          </p>
          <p class="item">
            <span class="props" style="width: 40px">备注: </span>
            <span style="padding-right: 30px; width: 450px">{{
              orderDetails.remark
            }}</span>
          </p>
        </el-col>
        <el-col :span="8">
          <p class="item">
            <span class="props">经办日期: </span>{{ orderDetails.handlingTime }}
          </p>
          <p class="item">
            <span class="props">学员创建人: </span>{{ orderDetails.creator }}
          </p>
          <p class="item">
            <span class="props">业绩归属人: </span>{{ orderDetails.saler }}
          </p>
          <p class="item">
            <span class="props">经办人: </span>{{ orderDetails.operatorName }}
          </p>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="oredr-buy">
    <p>购买内容</p>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      v-loading="loading"
    >
      <el-table-column
        label="购买项目"
        fixed="left"
        show-overflow-tooltip
        :formatter="formatName"
        width="180"
      >
        <template #default="scope">
          {{ scope.row.courseName }}
        </template>
      </el-table-column>
      <el-table-column
        label="订单类型"
        show-overflow-tooltip
        :formatter="formatName"
        width="180"
      >
        <template #default="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>
      <el-table-column
        property="coursePriceName"
        label="定价标准"
        show-overflow-tooltip
        :formatter="formatName"
        width="240"
      >
        <template #default="scope">
          {{
            `${scope.row.tcoursePrice.name}(${
              scope.row.tcoursePrice.totalPrice
            }元${
              scope.row.tcoursePrice.num === 1
                ? "/"
                : scope.row.tcoursePrice.num
            }课时)`
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="购买数量"
        show-overflow-tooltip
        :formatter="formatName"
        width="180"
      >
        <template #default="scope">
          {{ scope.row.countLessonTotalNormal }}课时
        </template>
      </el-table-column>

      <el-table-column
        label="总价"
        show-overflow-tooltip
        :formatter="formatName"
        width="180"
      >
        <template #default="scope"> ¥ {{ scope.row.courseAmount }} </template>
      </el-table-column>
      <el-table-column
        label="赠送数量"
        show-overflow-tooltip
        :formatter="formatName"
        width="180"
      >
        <template #default="scope">
          {{
            scope.row.countLessonTotalGive
              ? `${scope.row.countLessonTotalGive}课时`
              : "-"
          }}
        </template>
      </el-table-column>

      <!-- <el-table-column
        label="直减/折扣"
        show-overflow-tooltip
        :formatter="formatName"
        width="150"
      >
        <template #default="scope">
          ¥ {{ scope.row.courseAmount - scope.row.discountAmount }}
        </template>
      </el-table-column> -->
      <el-table-column
        label="折后价"
        show-overflow-tooltip
        :formatter="formatName"
        width="180"
      >
        <template #default="scope"> ¥ {{ scope.row.discountAmount }} </template>
      </el-table-column>

      <el-table-column
        label="有效期至"
        :header-cell-style="headerCellStyle"
        :formatter="formatName"
        width="180"
      >
        <template #header>
          <span style="margin-right: 8px">有效期至</span>
          <el-tooltip
            class="item"
            effect="dark"
            content="该时间是创建订单时所设置的课程有效期时间"
            placement="top"
          >
            <el-icon color="#C0C4CC" size="16px"><QuestionFilled /></el-icon>
          </el-tooltip>
        </template>
        <template #default="scope">
          {{ scope.row.expireDate ? scope.row.expireDate : "长期有效" }}
        </template>
      </el-table-column>
      <el-table-column
        property="state"
        label="订单状态"
        show-overflow-tooltip
        :formatter="formatName"
        fixed="right"
      />
    </el-table>
    <p style="float: right; margin-top: 40px">
      <span>应收金额(元) : </span><span>{{ orderDetails.amount }}</span>
    </p>
  </div>
</template>

<script setup>
import { getOrderDetails } from "@/api/studentManagement/index.js";

const props = defineProps({
  orderId: {
    type: String,
  },
});

const orderDetails = ref({});
const tableData = ref([]);
const toGetOrderDetails = async () => {
  try {
    const res = await getOrderDetails({ id: props.orderId });
    if (res.code == 200) {
      orderDetails.value = res.data;
      tableData.value.push(orderDetails.value);
    }
  } catch (error) {
    console.error("获取订单详情失败:", error);
  }
};
onMounted(toGetOrderDetails);
//表格没有数据显示'-'
const formatName = (row, column, cellValue) => {
  return cellValue === "" || cellValue === null ? "-" : cellValue;
};
</script>

<style lang="scss" scoped>
.order-info {
  padding: 20px 10px;

  border: 1px solid rgb(232.8, 233.4, 234.6);

  .orderNo {
    color: #333;
    font-size: 18px;
  }
  .order-info-main {
    padding: 0 10px;
    margin-top: 10px;
    border: 1px solid rgb(232.8, 233.4, 234.6);
    .item {
      display: flex;
      color: #000;
      align-items: center;
      .props {
        // width: 40px;
        margin-right: 5px;
        color: #333;
      }
    }
  }
}
.order-buy {
  display: inline-block;
}
</style>
